<template>
  <div class="login-container">
    <div class="left-section"></div>
    <div class="right-section">
      <div class="login-card">
         <h2 class="login-title">黄工{{ greeting }}好！</h2>
        <el-form @submit.prevent="handleLogin" class="login-form" :model="form">
          <el-form-item>
            <el-input
              v-model="form.email"
              type="email"
              placeholder="邮箱"
              size="large"
              :prefix-icon="User"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              type="password"
              placeholder="密码"
              size="large"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="large" @click="handleLogin" class="login-btn">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAuth } from '@/composables/useAuth'

const router = useRouter()

const form = ref({
  email: '',
  password: ''
})

const currentTime = ref(new Date())

const greeting = computed(() => {
  const hour = currentTime.value.getHours()
  if (hour >= 6 && hour < 12) {
    return '早上'
  } else if (hour >= 12 && hour < 18) {
    return '下午'
  } else {
    return '晚上'
  }
})

let timer = null

onMounted(() => {
  // 每分钟更新一次时间
  timer = setInterval(() => {
    currentTime.value = new Date()
  }, 60000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

const handleLogin = () => {
  // 模拟登录验证
  const { login } = useAuth()
  
  // 模拟用户数据
  const mockUsers = {
    'admin@example.com': { id: 1, username: 'admin', email: 'admin@example.com', role: 'admin' },
    'editor@example.com': { id: 2, username: 'editor', email: 'editor@example.com', role: 'editor' },
    'viewer@example.com': { id: 3, username: 'viewer', email: 'viewer@example.com', role: 'viewer' }
  }
  
  const user = mockUsers[form.value.email]
  if (user) {
    login(user)
    ElMessage.success('登录成功')
    router.push('/dashboard')
  } else {
    ElMessage.error('用户名或密码错误')
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.left-section {
  flex: 1;
}

.right-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: white;
  padding: 50px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 90%;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.login-form {
  width: 100%;
}

.login-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}
</style>